﻿@{
    Layout = "../Shared/_AngularJSLayout.cshtml";
}

@Html.Partial("Head")

@section foot
{
    <script>
        
    </script>
}


 
<div ng-controller="Controller">
   
    <ul>
        <li ><input type="checkbox" ng-model="groups.checkAll" ng-click="checkAll(groups)" /></li>
        <li ng-repeat="item in groups.items"><input type="checkbox" ng-model="item.checked" ng-click="check()" />{{item.text}}</li>
    </ul>
    <p>current checkAll is : {{groups.checkAll}}</p>
    <p>current items is : <b ng-repeat="item in groups.items">{{item.checked}} ;</b></p>
</div>

<style type="text/css">
    .css-form input.ng-invalid.ng-dirty {
        background-color: #FA787E;
    }

    .css-form input.ng-valid.ng-dirty {
        background-color: #78FA89;
    }
</style>

<script type="text/javascript">
    function Controller($scope) {

        $scope.groups = {
            checkAll: false,
            items: [
                {
                    checked: false,
                    text:"111"
                }, {
                    checked: true,
                    text:"222"
                }, {
                    checked: false,
                    text:"333"
                }
            ]
        };
        $scope.checkAll = function(groups) {
            groups.items[0].checked = groups.checkAll;
            groups.items[1].checked = groups.checkAll;
            groups.items[2].checked = groups.checkAll;
        };

    }
</script>
